<template>
  <div class="richtextstyle">
    <!-- 标题 -->
    <h2>{{ datas.text }}</h2>

    <el-form label-width="80px" :model="datas" size="small">
      <!-- 背景颜色 -->
      <el-form-item label="背景颜色">
        <!-- 背景颜色 -->
        <el-color-picker
            v-model="datas.backColor"
            show-alpha
            style="float: right"
            class="picke"
            :predefine="predefineColors"
        >
        </el-color-picker>
      </el-form-item>
    </el-form>

    <van-notice-bar scrollable>回车换行提示："Shift+回车"=段落内换行，只按"回车"=重新开始一个段落；</van-notice-bar>
    <view class="edit" style="margin: 5px auto">
      <RichTextEditor v-model="datas.myValue" :init="init"/>
    </view>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce";

import Editor from '@/static/components/tinymce-vue';
// 引入工具栏图标和主题
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
// 引入富文本编辑器主题的js和css，不然显示出错
import "tinymce/themes/silver/theme.min";
import "tinymce/skins/ui/oxide/skin.min.css";
// 扩展插件 - 根据需要引入
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/template"; // 模板插件
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/paste";
import "tinymce/plugins/preview";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/charmap";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/emoticons/js/emojis";
import "tinymce/plugins/help";
import "tinymce/plugins/codesample";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/advlist";
import "tinymce/plugins/hr";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/autolink";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/autosave";
import "tinymce/plugins/autoresize";


export default {
  name: 'richtextstyle',
  props: {
    datas: Object,
  },
  components: {
    'RichTextEditor': Editor,
  },
  data() {
    return {
      init: {
        height: 1000,
        language_url: '/static/components/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code wordcount',
          'autosave bbcode codesample directionality emoticons fullpage hr nonbreaking pagebreak save tabfocus template toc visualchars'
        ],
        style_formats: [{title: '首行缩进', block: 'p', styles: {'text-indent': '2em'}},],
        lineheight_val:
            "1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5", //行高
        fontsize_formats:
            "8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt",
        font_formats:
            "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
        powerpaste_word_import: "merge",
        paste_data_images: true,

        image_advtab: true,
        toolbar:
            ['undo redo | formatselect | bold italic underline forecolor backcolor hr | \
					alignleft aligncenter alignright alignjustify | \
					bullist numlist outdent indent | lists image media | removeformat fullscreen',
              'restoredraft charmap codesample | ltr rtl | emoticons fullpage insertdatetime |\
              link nonbreaking pagebreak paste | preview print | save searchreplace template | toc visualblocks visualchars | wordcount',
              'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'],

        // toolbar: [
        //   `fullscreen code bold italic underline strikethrough alignleft aligncenter alignright alignjustify
        //   outdent indent image link removeformat cut copy paste ltr rtl anchor restoredraft pagebreak save
        //   table tabledelete tableprops tablerowprops tablecellprops tableinsertrowbefore tableinsertrowafter tabledeleterow tableinsertcolbefore tableinsertcolafter tabledeletecol
        //   backcolor formatselect fontselect fontsizeselect forecolor
        //   subscript superscript hr preview print searchreplace wordcount toc charmap bullist numlist insertdatetime undo redo`,
        // ],
        theme: 'silver', //主题
        menubar: true,
        images_upload_handler: (blobInfo, success, failure) => {
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(img);
        },
        //
        // images_upload_handler: (blobInfo, succFun, failFun) => {
        //   var formData = new FormData()
        //
        //   formData.append('path', 'test/')
        //   formData.append('file', blobInfo.blob(), blobInfo.blob().name)
        //
        //   var xhr = new XMLHttpRequest()
        //   xhr.withCredentials = false
        //   xhr.open('POST', `${window.global_config.BASE_URL}upload/miniShop`)
        //
        //   xhr.onload = function () {
        //     // 获取数据
        //     var res = JSON.parse(xhr.response)
        //     if (res.success != true) return failFun('HTTP Error: ' + res.msg)
        //     succFun(res.data.src)
        //   }
        //   xhr.send(formData)
        // },
      },
      predefineColors: [
        // 颜色选择器预设
        'rgb(255, 255, 255)',
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        '#409EFF',
        '#909399',
        '#C0C4CC',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577',
      ],
    }
  },
}
</script>

<style scoped lang="less">
.richtextstyle {

}

</style>
